<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="org.example.dao.DBUtil" %>
<%@ page import="org.example.entity.chatmessages" %>
<%@ page import="java.util.List" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
    <script>
        var sender = '<%=session.getAttribute("sender")%>'; // 获取当前会话中的用户名
        if(sender != 101){
            var receiver = '<%=session.getAttribute("receiver")%>'; // 获取当前会话中的用户名
        }
    </script>
    <script src="scripts.js" defer></script> <!-- 延迟加载JavaScript文件 -->
</head>
<body>
<div class="container">
    <div class="chat-container">
        <div class="chat-messages" id="chat-messages">
            <%
                DBUtil connector = new DBUtil(); // 创建数据库连接工具实例
                List<chatmessages> messagesList = connector.getUsers(); // 获取用户消息列表

                // 遍历消息列表
                for (chatmessages message : messagesList) {
                    // 判断消息发送者是否为当前用户
                    String userClass = (message.getSender() == (int)session.getAttribute("sender")) ? "my" : "other";
                    // 根据用户类型设置显示名称
                    String displayName = ((int)session.getAttribute("sender")== 101) ?
                            ((message.getSender() == (int) session.getAttribute("sender")) ? "👩‍💼" : "👨‍💼") :
                            ((message.getSender() == (int) session.getAttribute("sender")) ? "👨‍💼" : "👩‍💼");
            %>
            <% if (message.getMessage_content() != null && !(message.getMessage_content().contains("images"))) { %>
            <div class="message <%= userClass %>-message">
                <span class="username <%= userClass %>-username "><%=displayName%></span>
                <%
                    String cssClass = "text";
                    if ("👩‍💼".equals(displayName)) {
                        cssClass = "message-text  message-text-w";
                    }else {
                        cssClass = "message-text  message-text-gy";
                    }
                %>
                <span class="<%= cssClass %>"><%= message.getMessage_content() %></span>
            </div>
            <% } else { %>
            <div class="message <%= userClass %>-message <%= userClass %>-image-message">
                <span class="username <%= userClass %>-username"><%=displayName%></span>
                <img src="<%= message.getMessage_content() %>">
            </div>
            <% }
                }%>
            <script>
                var chatContainer = document.getElementById("chat-messages");
                chatContainer.scrollTop = chatContainer.scrollHeight;
            </script>
        </div>
        <div class="message-in">
            <form id="chat-form" action="" onsubmit="return onSubmitForm()">
                <label for="image-input" class="image-button" title="Send Image">📷</label> <!-- 发送图片按钮 -->
                <input type="file" id="image-input" accept="image/*"> <!-- 图片上传输入框 -->
                <input type="text" id="message-input" name="message"> <!-- 消息输入框 -->
                <button class="send-button" type="submit">发送</button> <!-- 发送按钮 -->
            </form>
        </div>
    </div>
</div>
</body>
</html>
